<template>
	<div class="u-page">
		<section class="aui-flexView">
			<section class="aui-scrollView">
				<div class="aui-flex aui-choice-white" style="padding: 30rpx 30rpx 0 30rpx;">
					<div class="aui-flex-box">
						<h1>{{form.Subject}}</h1>
					</div>
				</div>
				<div class="aui-flex aui-flex-default aui-mar15 margin-30" @click="toTaskDetail">
					<div class="aui-flex-goods">
						<img :src="form.Pictures.split(',')[0]" alt="">
					</div>
					<div class="aui-flex-box">
						<!-- <p>简介：{{form.Title?form.Title:""}}</p> -->
						<div class="aui-tag" v-for="(item, index) in KeyWordList">
							<u-tag
								:text="item.label"
								mode="dark"
								size="mini"
								bg-color="#7688e8"
							></u-tag>
						</div>
					</div>
				</div>
				
				<div class="aui-flex aui-choice-white b-line">
					<div class="aui-flex-box">预付金额(元)</div>
					<u-input type="number" v-model="form.TotalCost" disabled="true"></u-input>
				</div>
				
				<div class="aui-flex aui-choice-white b-line">
					<div class="aui-flex-box">人均推广费用(元)</div>
					<u-input type="number" v-model="form.AverageCost" disabled="true"></u-input>
				</div>
				
				<div class="aui-flex aui-choice-white b-line">
					<div class="aui-flex-box">已支出金额(元)</div>
					<u-input type="number" v-model="form.UsedCost" disabled="true"></u-input>
				</div>
				
				<div class="divHeight"></div>
				
				<div class="aui-flex">
					<u-collapse class="aui-collapse-title">
						<u-collapse-item :title="collapseTitle">
							<div class="c-height" v-if="PayRecordList&&PayRecordList.length>0">
								<div class="aui-flex b-line" v-for="(item,index) in PayRecordList" :key="index">
									<div class="aui-record-text">
										<p>{{index+1}}.{{item.Details}}</p>
									</div>
								</div>
							</div>
							<div class="u-pt-50 u-pb-50" style="margin: 0 auto;" v-else>
								<u-empty text="暂无数据" mode="data"></u-empty>
							</div>
						</u-collapse-item>
					</u-collapse>
				</div>
				
				<div class="divHeight"></div>
				
				<div v-if="overstep">
					
					<div class="aui-flex">
						<div class="aui-flex-box flex-between">
							<h1>收款人信息</h1>
						</div>
					</div>
					
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">收款方式</div>
						<u-input type="number" v-model="bankObj.PaymentType" disabled="true"></u-input>
					</div>
					
					<div v-if="showItem">
						<div class="aui-flex aui-choice-white b-line">
							<div class="aui-flex-box">银行卡号</div>
							<u-input type="number" v-model="bankObj.BankCardNum" disabled="true"></u-input>
						</div>
						
						<div class="aui-flex aui-choice-white b-line">
							<div class="aui-flex-box">开户行</div>
							<u-input type="number" v-model="bankObj.BankName" disabled="true"></u-input>
						</div>
						
						<div class="aui-flex aui-choice-white b-line">
							<div class="aui-flex-box">收款户名</div>
							<u-input type="number" v-model="bankObj.Payee" disabled="true"></u-input>
						</div>
						
						<div class="aui-flex aui-choice-white b-line">
							<div class="aui-flex-box">手机号码</div>
							<u-input type="number" v-model="bankObj.PhoneNumber" disabled="true"></u-input>
						</div>
					</div>
					
					<div v-else>
						<div class="aui-flex aui-choice-white b-line">
							<div class="aui-flex-box">支付宝账号</div>
							<u-input type="number" v-model="bankObj.AlipayAccount" disabled="true"></u-input>
						</div>
						
						<div class="aui-flex aui-choice-white b-line">
							<div class="aui-flex-box">姓名</div>
							<u-input type="number" v-model="bankObj.AlipayName" disabled="true"></u-input>
						</div>
					</div>
				
				</div>	
				
				<div class="Tips" style="padding-top:20rpx;" v-if="!ReadOnly">
				  <span style=" color: #f02323;">温馨提示：请您核算此次推广支出，确认无误之后，点击“核算无误”按钮提交。情况1：200以内的剩余推广费，将在您点击“核算无误”按钮后，自动转账至对方的微信钱包；情况2:200以上的推广费用，请您线下通过银行卡/支付宝转账至对方账号，再点击“核算无误”按钮提交！</span>
				</div>
				
				<div class="aui-bar-footer" v-if="!ReadOnly">
					<div class="aui-flex">
						<div class="aui-flex-box">
							应退金额：<span>￥{{form.RemainCost?form.RemainCost:0}}</span>
						</div>
						<div>
							<u-button :disabled="isClick" :custom-style="{background:'#f21956',padding:'52rpx 50rpx',color:'#fff',fontSize:'28rpx',borderRadius:'0rpx'}" @click="Refund">核算无误</u-button>
						</div>
					</div>
				</div>
				
			</section>
		</section>
	</div>
</template>

<script>
export default {
  data() {
    return {
      form: {
		  docUnid: '', // 主文档id
	  },
	  isClick: false,
	  showItem: false, // 根据收款方式显示不同内容
	  overstep: false, // 应退金额是否超过200
	  ReadOnly: false,//是否只读（查看）
	  bankObj: {},// 收款信息
	  PayRecordList: [],// // 支出明细
	  collapseTitle: '支出明细(共0条记录)',
	  KeyWordList: [],// 关键字
    }
  },

  onLoad(options) {
	
	// 未登录跳转到登录页面
	var loginRes = this.checkLogin();
	if (!loginRes) {
	  return false;
	}
	
	// 是否只读
	if(this.isNotNull(options.ReadOnly)){
		if(options.ReadOnly == '1'){
			this.ReadOnly = true
		}
	}
	
	// 主文档id
	this.form.docUnid = options.docUnid;// '1553948489568882688'
	if(this.isNotNull(this.form.docUnid)){
		this.getPromoteDetails()
		this.getPayRecordList()
	} else {
		this.showMSG('error','数据有误')
		setTimeout(() => {
			this.goBack()
		}, 1500)
	}
    
  },
  
  methods: {
		/**
		* 获取推广任务详情
		*/
		async getPromoteDetails() {
			// 设置按钮为不可点击
			this.isClick = true;
			const userInfo = uni.getStorageSync('userInfo')
			let result = await this.$u.api.unifyRequest({
				userId: userInfo.userId,
				nickName: userInfo.nickName,
				appid: 'Promote2',
				wf_num: 'R_Promote2_BL004',
				docUnid: this.form.docUnid,
				loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
			});
			if(result.code == 200){
				this.form = result.data
				if(this.isNotNull(this.form.Pictures)){
					this.PicturesList = this.form.Pictures.split(",")
				}
				this.form.docUnid = result.data.WF_OrUnid;// 主文档id
				
				// 渲染标签
				this.KeyWordList =  this.RestructuringLabel(this.form.KeyWord);// 关键字
				
				// 判断应退款项是否超过200
				if(parseFloat(this.form.RemainCost) > 200.00){
					this.overstep = true;
					// 获取 发起人 收款信息
					let res = await this.$u.api.unifyRequest({
					  userId: userInfo.userId,
					  nickName: userInfo.nickName,
					  appid: 'Promote2',
					  wf_num: 'R_Promote2_B004',
					  payeeid: this.form.Initiatorid,// 发起人id
					  loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
					});
					res = JSON.parse(JSON.stringify(res));
					if(res.code == "200"){
					  // 收款信息  
					  if(res.data){
						this.bankObj = res.data;
						if(this.bankObj.PaymentType == "银行卡收款"){
							this.showItem = true;
						}
					  }
					}
				}
				// 设置按钮为可点击
				this.isClick = false;
			} else {
				// 设置按钮为可点击
				this.isClick = false;
				this.$u.toast(result.msg)
			}
		},
		
		
		/**
		 * 获取支出明细
		 */
		async getPayRecordList(){
			// 设置按钮为不可点击
			this.isClick = true;
			const userInfo = uni.getStorageSync('userInfo')
			let result = await this.$u.api.unifyRequest({
				userId: userInfo.userId,
				nickName: userInfo.nickName,
				appid: 'Promote2',
				wf_num: 'R_Promote2_BL013',
				docUnid: this.form.docUnid,
				loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
			});
			if(result.code == 200){
				this.PayRecordList =  result.data
				if(this.PayRecordList.length > 0){
					this.collapseTitle = '支出明细(共'+this.PayRecordList.length+'条记录)'
				}
				// 设置按钮为可点击
				this.isClick = false;
			} else {
				// 设置按钮为可点击
				this.isClick = false;
				this.$u.toast(result.msg)
			}
		},
		
		/**
		 * 核算无误，退款
		 */
		async Refund() {
			// 设置按钮为不可点击
			this.isClick = true;
			const userInfo = uni.getStorageSync('userInfo')
			let result = await this.$u.api.unifyRequest({
				userId: userInfo.userId,
				nickName: userInfo.nickName,
				appid: 'Promote2',
				wf_num: 'R_Promote2_BL012',
				docUnid: this.form.docUnid,
				loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
			});
			if(result.code == 200){
				// 设置按钮为可点击
				this.isClick = false;
				uni.reLaunch({url:'/pages_private_scene2/Promote2/common/result?mode=7'});
			} else {
				this.$u.toast(result.msg);
				// 设置按钮为可点击
				this.isClick = false;
			}
		},
		
	  
  },
};
</script>

<style scoped>
	html,body {
		color: #333;
		margin: 0;
		height: 100%;
		font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-weight: normal;
	}

	* {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	a {
		text-decoration: none;
		color: #000;
	}

	a, label, button, input, select {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	img {
		width: 100%;
		height: auto;
		display: block;
		border: 0;
	}

	body {
		background: #fff;
		color: #666;
	}

	html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
		margin: 0;
		padding: 0;
	}

	a {
		text-decoration: none;
		color: #08acee;
	}

	button {
		outline: 0;
	}

	button,input,optgroup,select,textarea {
		margin: 0;
		font: inherit;
		color: inherit;
		outline: none;
	}

	li {
		list-style: none;
	}

	a {
		color: #666;
	}

	.clearfix::after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}

	.clearfix {
	}

	.divHeight {
		width: 100%;
		height: 10px;
		background: #f5f7fc;
		position: relative;
		overflow: hidden;
	}

	.r-line {
		position: relative;
	}

	.r-line:after {
		content: '';
		position: absolute;
		z-index: 0;
		top: 0;
		right: 0;
		height: 100%;
		border-right: 1px solid #D9D9D9;
		-webkit-transform: scaleX(0.5);
		transform: scaleX(0.5);
		-webkit-transform-origin: 100% 0;
		transform-origin: 100% 0;
	}

	.b-line {
		position: relative;
	}

	.b-line:after {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #e2e2e2;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.aui-arrow {
		position: relative;
		padding-right: 0.8rem;
		color: #7f8699;
		font-size: 0.85rem;
	}

	.aui-arrow span {
		font-size: 0.8rem;
		color: #9b9b9b;
	}

	.aui-arrow:after {
		content: " ";
		display: inline-block;
		height: 6px;
		width: 6px;
		border-width: 2px 2px 0 0;
		border-color: #848484;
		border-style: solid;
		-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		position: relative;
		top: -2px;
		position: absolute;
		top: 50%;
		margin-top: -6px;
		right: 2px;
		border-radius: 1px;
	}

	.aui-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 15px;
		position: relative;
	}

	.aui-flex-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		min-width: 0;
		font-size: 14px;
		color: #333;
	}
	
	.aui-flexView {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.aui-scrollView {
		width: 100%;
		height: 100%;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		position: relative;
		padding-bottom: 10px;
	}

	.aui-navBar {
		height: 44px;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		z-index: 102;
		background: #fff;
	}

	.aui-navBar-item {
		height: 44px;
		min-width: 20%;
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 15%;
		-ms-flex: 0 0 15%;
		flex: 0 0 15%;
		padding: 0 0.9rem;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		font-size: 0.7rem;
		white-space: nowrap;
		overflow: hidden;
		color: #808080;
		position: relative;
	}

	.aui-navBar-item:first-child {
		-webkit-box-ordinal-group: 2;
		-webkit-order: 1;
		-ms-flex-order: 1;
		order: 1;
		margin-right: -25%;
		font-size: 0.9rem;
		font-weight: bold;
	}

	.aui-navBar-item:last-child {
		-webkit-box-ordinal-group: 4;
		-webkit-order: 3;
		-ms-flex-order: 3;
		order: 3;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		font-size: 12px;
		color: #4e85fd;
	}

	.aui-center {
		-webkit-box-ordinal-group: 3;
		-webkit-order: 2;
		-ms-flex-order: 2;
		order: 2;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		height: 44px;
		width: 80%;
		margin-left: 25%;
	}

	.aui-center-title {
		text-align: center;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		display: block;
		text-overflow: ellipsis;
		font-size: 1rem;
		color: #333;
	}

	.icon {
		width: 19px;
		height: 19px;
		display: block;
		border: none;
		float: left;
		background-size: 19px;
		background-repeat: no-repeat;
	}

	.aui-flex-box h1 {
		color: #444444;
		font-weight: 500;
		font-size: 1rem;
		overflow: hidden;
		position:relative;
		padding-left:1rem;
	}

	.aui-flex-box h2 {
		color: #222;
		font-weight: normal;
		font-size: 1.1rem;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
		text-overflow: ellipsis;
		padding-left: 1rem;
	}

	.aui-flex-box p {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
		text-overflow: ellipsis;
		font-size: 0.9rem;
		margin-bottom: 0.1rem;
		color: #ffffffc4;
	}

	.aui-flex-box h3 {
		font-size: 0.7rem;
		color: #ffffffc4;
		font-weight: normal;
		width: 100%;
		overflow: hidden;
	}
	.aui-flex-box h4 {
		font-size: 0.7rem;
		color: #ffffffc4;
		font-weight: normal;
		width: 100%;
		overflow: hidden;
	}
	.aui-flex-box h5 {
		font-size: 0.8rem;
		color: #ffffff;
		font-weight: normal;
		width: 100%;
		overflow: hidden;
	}
	
	.aui-palace {
		padding: 0.6rem 0;
		position: relative;
		overflow: hidden;
		background: white;
	}

	.aui-palace-grid {
		position: relative;
		float: left;
		padding: 1px;
		width: 33.333%;
		box-sizing: border-box;
		margin: 10px 0;
	}

	.aui-palace-img {
		width: 50px;
		height:50px;
		margin: 0 auto;
	}

	.aui-palace-text p {
		text-align: center;
		font-size: 14px;
		color: #333333;
		margin-top:5px;
	}


	.aui-current-item{
		width:29%;
		float:left;
		margin:2%;
		text-align:center;
		border-radius:100px;
		background:#ededed;
		padding:8px 0;
		font-size:14px;
	}

	.this-card{
		background:#16d7da;
		color: #fff;
	}


	.aui-list-box{
		padding:0 10px;
	}


	.aui-flex-box h1:after{
		content: '';
		position: absolute;
		z-index: 0;
		top: 3px;
		left: 0;
		width: 4px;
		height: 16px;
		border-radius: 10px;
		background: #16d7da;
	}

	.textarea-block{
		background: #ededed;
		width: 92%;
		margin:0 auto;
		border-radius:5px;
		padding: 20rpx;
		height: 11.5rem;
	}

	.textarea-block textarea {
		width: 100%;
		padding: 1rem;
		font-size: 0.95rem;
		overflow: hidden;
		resize: none;
		height: 8rem;
		border: none;
		background:none;
		line-height:1.8;
	}

	.aui-textarea-count{
		text-align:right;
		padding-right:1rem;
	}

	.aui-upload-box {
		background-color: #fff;
		/* padding: .1rem 1rem 0.5rem 0.4rem; */
		width: 210rpx;
		height: 210rpx;
		padding-top: 10rpx;
		padding-right: 10rpx;
	}

	#chose_pic_btn {
		width: 210rpx;
		height: 210rpx;
		position: relative;
		display: inline-block;
		background-image: url('');
		box-sizing: border-box;
		background-size: 45px 45px;
		background-position: center center;
		background-repeat: no-repeat;
		background-color: #ededed;
		margin-left: 3.3333%;
		margin-bottom: 12px;
		border-radius:5px;
	}

	#chose_pic_btn input {
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		width: 100%;
		height: 100%
	}

	.aui-upload-box .pic_look {
		width: 30%;
		height: 100px;
		display: inline-block;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		box-sizing: border-box;
		margin-left: 3.3333%;
		margin-bottom: 12px;
		position: relative;
		border-radius:5px;
	}

	.aui-upload-box .pic_look em {
		position: absolute;
		display: inline-block;
		width: 20px;
		height: 20px;
		background-color: #fff;
		color: #fff;
		font-size: 18px;
		right: -0.5rem;
		top: -0.5rem;
		text-align: center;
		line-height: 22px;
		border-radius: 50%;
		font-weight: 700;
		z-index: 1;
		background-image: url('');
		background-size: 20px;
	}

	#chose_pic_btn input {
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		width: 100%;
		height: 100%
	}

	.title_phone {
		color: #444444;
		font-weight: 500;
		font-size: 1rem;
		overflow: hidden;
		position: relative;
	}

	.aui-pay-com {
		width:92%;
		margin:0.5rem auto 0;
	}

	.aui-pay-com button {
		background-color: #16d7da;
		color:white;
		border:none;
		width:100%;
		padding:12px 0;
		border-radius:5px;
		font-size:16px;
	}
	
	.aui-choice-white {
		background: #fff;
	}
	
	.aui-order-box {
		padding: 10px 20px;
	}
	
	.aui-flex-goods {
		margin-right: .8em;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
	}
	
	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
	}
	
	.aui-flex-clear {
		padding: 0;
		margin-top: 20px;
	}
	
	.aui-flex-clear .aui-flex-box {
		color: #f21956;
		font-weight: bold;
	}
	
	.aui-mar15 {
		margin-bottom: 15px;
	}
	
	.aui-flex-default {
		background: #f3f1f1;
	}
	
	.aui-flex-default h2 {
		font-size: 14px;
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-wrap: normal;
		word-wrap: break-word;
		word-break: break-all;
		padding-bottom: 5px;
	}
	
	.aui-flex-default p {
		color: #999999;
		font-size: 12px;
	}
	
	.margin-30{
		margin: 30rpx;
	}
	
	img{
		height: 160rpx;
	}
	
	.pictrues-box{
		display: flex;
		flex-wrap: wrap;
		width: 95%;
		margin: 0 auto;
		padding-bottom: 40rpx;
	}
	
	.Tips{
	    font-size: 24rpx;
	    line-height: 24rpx;
	    margin-top: 12rpx;
	    color: #9a9a9a;
	    padding: 30rpx;
	    margin: 0;
	    word-break: break-all;
	    -webkit-overflow-scrolling: touch;
	    -webkit-tap-highlight-color: transparent;
	    text-size-adjust: 100%;
	    box-sizing: border-box;
	  }
	  
	.flex-between{
		display: flex;
		justify-content: space-between;
	}
	  
	.aui-bar-footer {
		line-height: 52px;
		height: 52px;
		background: #fff;
		box-shadow: 0 -2px 10px #ddd;
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.aui-btn-button {
		background: #f21956;
		padding: 0 25px;
		color: #fff;
		font-size: 14px;
	}

	.aui-bar-footer .aui-flex {
		padding: 0;
	}

	.aui-bar-footer .aui-flex-box {
		padding-left: 15px;
	}

	.aui-bar-footer .aui-flex-box span {
		font-style: normal;
		color: #f21956;
	}
	
	.aui-record-text {
		color:#4e84fd;
	}
	
	.aui-collapse-title {
		color: #444444;
		font-weight: 500;
		font-size: 1rem;
		overflow: hidden;
		position:relative;
		padding-left:1rem;
	}
	
	.aui-collapse-title::before{
		content: '';
		position: absolute;
		z-index: 0;
		top: 11px;
		left: 0;
		width: 4px;
		height: 16px;
		border-radius: 10px;
		background: #16d7da;
	}
	
	.c-height {
		width: 100%;
		height: 400px;
		overflow: auto;
	}
	
	.aui-tag {
			  display:inline
	}
	  
</style>
